<script setup lang='ts'>
import BaseSetting from './components/BaseSetting.vue'
import UserSetting from './components/UserSetting.vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const dialogVisible = ref(false)

const basic = ref()
const user = ref()
const open = () => {
  dialogVisible.value = true
  nextTick(() => {
    basic.value.open(userStore.user)
    user.value.open(userStore.user?.email)
  })
}

const myTab = ref('basic')
const handleTabChange = () => {
  console.log(myTab.value)
  if (myTab.value === 'basic') {
    nextTick(() => {
      user.value.close()
      basic.value.open(userStore.user)
    })
  } else {
    nextTick(() => {
      basic.value.close()
      user.value.open(userStore.user?.email)
    })
  }
}

const close = () => {
  dialogVisible.value = false
  user.value.close()
}

defineExpose({
  open,
  close,
})
</script>
<template>
  <div class="setting">
    <el-dialog title="设置" v-model="dialogVisible" width="50%" @close="close">
      <el-tabs tab-position="left" class="tabs" v-model="myTab" @tab-change="handleTabChange">
        <el-tab-pane name="basic" label="基本设置">
          <BaseSetting ref="basic" @handleClose="close"></BaseSetting>
        </el-tab-pane>
        <el-tab-pane name="set" label="账号设置">
          <UserSetting ref="user"></UserSetting>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
</style>